<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Unclickable filtered &middot; Isotope </title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="../css/style.css" />
  
  <!-- scripts at bottom of page -->

</head>
<body class="tests demos">
  
  <nav id="site-nav">
    <h1><a href="../index.html">Isotope</a></h1>

    <h2>Docs</h2>
    
    <ul>
      
        
          <li><a href="../docs/introduction.html">Introduction</a>
        
      
        
          <li><a href="../docs/options.html">Options</a>
        
      
        
          <li><a href="../docs/methods.html">Methods</a>
        
      
        
          <li><a href="../docs/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../docs/filtering.html">Filtering</a>
        
      
        
          <li><a href="../docs/sorting.html">Sorting</a>
        
      
        
          <li><a href="../docs/animating.html">Animating</a>
        
      
        
          <li><a href="../docs/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../docs/extending-isotope.html">Extending Isotope</a>
        
      
        
          <li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
        
      
        
          <li><a href="../docs/help.html">Help</a>
        
      
        
          <li><a href="../docs/license.html">License</a>
        
      
    </ul>
    
    <h2>Demos</h2>
    
    <ul>
      
        
          <li><a href="../demos/basic.html">Basic</a>
        
      
        
          <li><a href="../demos/elements-complete.html">Elements Complete</a>
        
      
        
          <li><a href="../demos/elements-partial.html">Elements Partial</a>
        
      
        
          <li><a href="../demos/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../demos/filtering.html">Filtering</a>
        
      
        
          <li><a href="../demos/sorting.html">Sorting</a>
        
      
        
          <li><a href="../demos/relayout.html">reLayout</a>
        
      
        
          <li><a href="../demos/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
        
      
        
          <li><a href="../demos/images.html">Images</a>
        
      
        
          <li><a href="../demos/combination-filters.html">Combination filters</a>
        
      
        
          <li><a href="../demos/hash-history.html">Hash history</a>
        
      
        
          <li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
        
      
        
          <li><a href="../demos/removing.html">Removing</a>
        
      
    </ul>
    
    <h2>Custom layout modes</h2>
    
    <ul>
      
        
          <li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
        
      
        
          <li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
        
      
        
          <li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
        
      
        
          <li><a href="../custom-layout-modes/big-graph.html">BIG Graph</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-column-shift.html">Masonry Column Shift</a>
        
      
    </ul>
    
    <h2><a href="../tests/index.html">Tests</a></h2>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
      <h1>Unclickable filtered</h1>
    

    <style>
  #container {
    width: 50%;
  }
  
  #clicked-display {
    display: inline-block;
    border: 1px dotted white;
    font-size: 1.1em;
    padding: 0 0.5em;
  }
</style>

<section id="copy">
  <p>For Internet Explorer and Opera, you might need to dismiss event on filtered out items. You should not be able to click on the big red blocks when filtered-out</p>
  <p id="clicked-display">(Last item clicked)</p>
</section>

<section id="options" class="clearfix">

  <ul id="etc" class="clearfix">
    <li id="toggle-red"><a href="#toggle-red">Toggle big red blocks</a></li>
    <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
  </ul>

</section> <!-- #options -->

<div id="container" class="clearfix">
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape big red"><a href="#big-red-block"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape big red"><a href="#big-red-block"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape big red"><a href="#big-red-block"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
</div>


<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.isotope.min.js"></script>
<script>
  $(function(){

    var $container = $('#container'),
        isRedFiltered = true;

    $container.isotope({
      itemSelector : '.color-shape',
      masonry: {
        columnWidth: 80
      },
      hiddenStyle: {
        opacity: 0.25
      }
    }).isotope({
      filter: '.blue'
    }).isotope('shuffle');
    
    $('#toggle-red a').click(function(){
      isRedFiltered = !isRedFiltered;
      var selector = isRedFiltered ? '.blue' : '*';
      $container.isotope({ filter: selector });
      return false;
    });
    
    $('#shuffle a').click(function(){
      $container.isotope('shuffle');
      return false;
    });

    var $clickedDisplay = $('#clicked-display');

    $('.color-shape a').click(function(){
      var $this = $(this);
      // back out if hidden item
      if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
        return;
      }
      $clickedDisplay.text( $(this).attr('href') );
    });

  });
</script>
    
    <footer>
      Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
    </footer>
    
  </section> <!-- #content -->
  

</body>
</html>